<template>
    <div class="page-container">
        <header-nav/>
        <media :query="{maxWidth: 768}">
            <div class="m-box">
                <div class="m-box-card">
                    <p class="m-box-card-title">{{activitysLists.Sponsor}}</p>
                    <div class="m-box-card-main">
                        <div class="main-rahmen">
                            <img :src="activitysLists.HeadLogo">
                        </div>
                        <div class="main-info">
                            <p class="info-theme">{{activitysLists.Theme}}</p>
                            <p class="info-site">{{activitysLists.Adress}}</p>
                            <p class="info-date">{{activitysLists.ThemeTime}}</p>
                        </div>
                    </div>
                </div>
                <div class="m-box-order">
                    <div class="m-box-order-ticket" v-for="item in orderLists" :key="item.ID">
                        <div class="ticket-lf">
                            <p class="lf-row">
                                <span class="row-type">{{item.UserType}}</span>
                                <span class="row-status-0" v-if="item.TicketState=='已拒绝'">{{item.TicketState}}</span>
                                <span class="row-status-1" v-if="item.TicketState=='待审核'">{{item.TicketState}}</span>
                                <span class="row-status-2" v-if="item.TicketState=='待参加'">{{item.TicketState}}</span>
                                <span class="row-status-3" v-if="item.TicketState=='已使用'">{{item.TicketState}}</span>
                                <span class="row-status-4" v-if="item.TicketState=='已取消'">{{item.TicketState}}</span>
                            </p>
                            <p>{{item.Name}}</p>
                            <p class="lf-date">报名时间：{{item.AttendDate}}</p>
                        </div>
                        <div class="ticket-rg">
                            <span class="rg-text-1">电子票</span>
                        </div>
                        <div class="ticket-iconT"></div>
                        <div class="ticket-iconB"></div>
                    </div>
                </div>
                <div class="m-box-btn">
                    <span>查看电子票</span>
                </div>
            </div>
        </media>
        <media :query="{minWidth: 768}">
            <footer-nav/>
        </media>
    </div>
</template>

<script>
import Moment from 'moment'
import Media from 'vue-media'
import Header from '../components/header'
import Footer from '../components/footer'
export default {
    name: 'MinTicketPage',
    data() {
        return {
            activitysLists: [],
            orderLists: [],
        }
    },
    components: {
        'header-nav': Header,
        'footer-nav': Footer,
        Media
    },
    created() {
        const ST = 'test'
        const UnionId = 'oppENwpc0g1gHjxpIncXC5s4Hqfo'
        $.ajax({
            type: 'GET',
            url: this.wxUrl + '/api/Activity/Get/' + ST,
            success: (res) => {
                console.log('GetActivity', res)
                this.activitysLists = res
            }
        })
        $.ajax({
            type: 'GET',
            url: this.baseUrl + '/api/WxMini/GetUserTickets',
            data: {
                unionId: UnionId,
                st: ST,
            },
            success: (res) => {
                console.log('GetUserTickets', res)
                res.Data.forEach(item => {
                    item.AttendDate = Moment(item.AttendDate).format("YYYY-MM-DD HH:mm:ss")
                })
                this.orderLists = res.Data
            }
        })
    }
}
</script>

<style>
@import "../assets/css/MinTicket.css";
</style>
